<template>
  <Layout style="height: 100%">
    <HHeader style="background: white;padding-left: 10px">
        <Button icon="h-icon-plus" color="primary" @click="add">添加</Button>
    </HHeader>
    <Content style="padding:10px">
      <Form mode="twocolumn">
        <FormItem v-for="(value, key) in form" :label="key">
          <div class="h-input-group">
            <input type="text" v-model="form[key]"/>
            <span class="h-input-addon link" @click="del(key)"><i class="icon-minus"/></span>
          </div>
        </FormItem>
        <FormItem single style="text-align: right">
          <Button icon="h-icon-check" color="primary" @click="save">保存</Button>
        </FormItem>
      </Form>
    </Content>
  </Layout>
</template>
<script>
import {ajax} from 'framework'
export default {
  name:'Configs',
  data(){
    return {
      form:{}
    }
  },mounted(){
    ajax.get("system/get_configs").then(r=>{
      this.form=r.data
    })
  },methods:{
    add(){
      this.$Prompt("输入配置名").then(r=>{
        if(this.form.hasOwnProperty(r)){
          this.$Message("该属性已存在")
          return
        }
        this.form[r]=''
        this.$forceUpdate()
      })
    },
    del(k){
      delete this.form[k]
      this.$forceUpdate()
    },
    save(){
      ajax.post("system/save_configs",this.form).then(r=>{
        this.$Message("已保存")
      })
    }
  }
}
</script>
